<template>
	<div class="journal-details i_maxW">
		<template v-for="item of details">
			<div class="space-crumbs">
				<!-- <router-link to="/space/journal">日志</router-link> -->
				<a @click="goBack()">日志</a>
				<span><i>></i>{{item.name}}</span>
			</div>
			<div class="j-details clear">
				<div class="j-details-l">
					<h3>{{item.name}}</h3>
					<div class="j-details-l-user">
						<span>
							<img :src="BASE_URL + item.avatar_path">
						</span>
						<span>{{item.user_name}}</span>
						<span>发表于  {{item.create_time}} </span>
					</div>
					<div class="j-details-l-cont" v-html="item.profile"></div>
				</div>
			</div>
		</template>
	</div>
</template>

<script>
	
	export default{
		data(){
			return {
				details: null,
				journalList: [],
			}
		},
		created(){
		
		},
		mounted(){
			// this.$nextTick(function () {
				this.getdetails()
				this.getjournalList()
			// })
		},
		methods: {
			goBack(){
				this.$router.back(-1)
			},
			getdetails(){
				let success = (res =>{
					this.details = res.data;
				});
				this.$ajax({
					url: 'api/resource/journal',
					method: 'get',
					params: {
						id: this.$route.query.id,
						data_type: 0
					},
					func: {success: success}
				})
			},
			getjournalList(){
				let success = (res =>{
					this.journalList = res.data;
				});
				this.$ajax({
					url: 'api/resource/journal',
					method: 'get',
					params: {
						create_id: this.$route.query.id,
						data_type: 0,
						status: 1,
						orderby: 'time',
						orderby_desc: 'DESC',
						authority: 1,
					},
					func: {success: success}
				})
			}
		}
	}
</script>
<style lang="scss">
	.journal-details{
		.space-crumbs{
			padding: 30px 0 20px;
			>a{
				font-size: 14px;
				line-height: 19px;
				color: #888;
			}
			>span{
				font-size: 14px;
			}
			i{
				color: #888;
				    padding: 0 10px;
				    font-family: "Simsun";
			}
		}

		.j-details{
			background: #fff;
			    padding: 30px 40px 60px;
			    min-height: 520px;
			    -webkit-box-shadow: 0 6px 7px 0 rgba(0, 0, 0, 0.1);
			    box-shadow: 0 6px 7px 0 rgba(0, 0, 0, 0.1);
			    border-radius: 0 0 5px 5px;

		}
		.j-details-l-cont{
			word-wrap: break-word;
			word-break: break-all;
			>p{
				line-height: 24px;
			}
			a{
				text-decoration: underline;
				color: #348efc;
			}
		}
		.j-details-l{
			>h3{
				font-size: 24px;
				    line-height: 31px;
				    text-align: center;
				    font-weight: bold;
			}
		}
		.j-details-l-user{
			margin: 40px 0;
			>span{
				display: inline-block;
				vertical-align: top;
				line-height: 40px;
				&:nth-of-type(1){
					width: 40px;
					height: 40px;
					border-radius: 50%;
					overflow: hidden;
					>img{
						width: 100%;
						height: 100%;
					}
				}
				&:nth-of-type(2){
					font-size: 14px;
					color: #2F6D8C;
					margin: 0 20px 0 15px;
				}
				&:nth-of-type(3){
					font-size: 12px;
					color: #888888;
				}
			}
		}
	}
</style>